import { type FC } from 'react';
import { useRouter } from 'expo-router';
import { useSafeState, useMemoizedFn } from 'ahooks';
import { SafeAreaView } from 'react-native-safe-area-context';
import { PageWrapper } from '@/components';
import TabPageView from '@/components/TabPageView';
import Step1 from './steps/step1';
import Step2 from './steps/step2';
import styles from './styles';

const steps = [
  Step1,
  Step2
];

const ProfileSteps: FC = () => {
  const router = useRouter();
  let [index, setIndex] = useSafeState(0);

  const onBack = useMemoizedFn(async () => {
    index -= 1;
    setIndex(index);
    return false;
  });

  const onNext = useMemoizedFn(() => {
    if (index >= steps.length - 1) {
      router.dismissTo('/posts');
    } else {
      index += 1;
      setIndex(index);
    }
  });

  return (
    <PageWrapper
      mode="white"
      onBack={onBack}
      showHeader={index > 0}
    >
      <SafeAreaView
        style={styles.container}
        edges={{ top: 'off', bottom: 'maximum' }}
      >
        <TabPageView
          page={index}
          pages={steps.map((Step, i) => {
            return {
              key: `key_${i}`,
              page: <Step onNext={onNext} />
            }
          })}
        />
      </SafeAreaView>
    </PageWrapper>
  );
}

export default ProfileSteps;